/**
 * Created by maxiaoqiang on 2018/8/16.
 */
import React, {Component} from "react";
import {Button} from "antd";
import "./index.less";

let _ordertimer = null;
class ExamCountDown extends Component {

    constructor(props) {
        super(props);
        this.state = {
            name: "",
            data: {},
            timer: "00:00:00"
        }
    }

    componentDidMount() {
        console.log(this.props.data)
        if (this.props.data) {
            this.setState({
                data: this.props.data
            });
            this.timer(this.props.data.endTime)
        }
    };

    leftTimer = (endDate)=> {
        var leftTime = (new Date(endDate)) - new Date(); //计算剩余的毫秒数
        var days = parseInt(leftTime / 1000 / 60 / 60 / 24, 10); //计算剩余的天数
        var hours = parseInt(leftTime / 1000 / 60 / 60 % 24, 10); //计算剩余的小时
        var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//计算剩余的分钟
        var seconds = parseInt(leftTime / 1000 % 60, 10);//计算剩余的秒数
        days = this.checkTime(days);
        hours = this.checkTime(hours);
        minutes = this.checkTime(minutes);
        seconds = this.checkTime(seconds);
        this.setState({
            timer: hours + ":" + minutes + ":" + seconds
        });
        if (days <= 0 && hours <= 0 && minutes <= 0 && seconds <= 0) {
            clearInterval(_ordertimer);
            _ordertimer = null;
        }

    };

    checkTime = (i)=> { //将0-9的数字前面加上0，例1变为01
        if (i < 10) {
            i = "0" + i;
        }
        return i;
    };

    timer = (endTime)=> {
        var date1 = new Date();
        var data2 = new Date(endTime);
        if (data2 < date1) {
            return;//设置的时间小于现在时间退出
        }
        _ordertimer = setInterval(()=> {
            this.leftTimer(data2)
        }, 1000);
    };


    render() {
        const data = this.state.data;
        console.log(data)
        return (
            <div className="count-down">
                <div className="title">
                    {(data.name && data.name.length > 0) ? data.name : "模拟试卷"}
                </div>
                <div className="time-out">
                    剩余时间<span>{this.state.timer}</span>
                </div>
                <div className="option-div">
                    <div className="card choose">1</div>
                    <div className="card">2</div>
                    <div className="card">3</div>
                    <div className="card">4</div>
                    <div className="card">5</div>
                    <div className="card">65</div>
                    <div className="card">4</div>
                    <div className="card">5</div>
                    <div className="card">65</div>
                    <div className="card">1</div>
                    <div className="card">2</div>
                    <div className="card">3</div>
                    <div className="card">4</div>
                    <div className="card">5</div>
                    <div className="card">65</div>
                    <div className="card">4</div>
                    <div className="card">5</div>
                    <div className="card">65</div>
                    <div className="card">1</div>
                    <div className="card">2</div>
                    <div className="card">3</div>
                    <div className="card">4</div>
                    <div className="card">5</div>
                    <div className="card">65</div>
                    <div className="card">4</div>
                    <div className="card">5</div>
                    <div className="card">65</div>
                    <div className="card">1</div>
                    <div className="card">2</div>
                    <div className="card">3</div>
                    <div className="card">4</div>
                    <div className="card">5</div>
                    <div className="card">55</div>
                    <div className="card">4</div>
                    <div className="card">5</div>
                    <div className="card">55</div>
                    <div className="card">1</div>
                    <div className="card">2</div>
                    <div className="card">3</div>
                    <div className="card">4</div>
                    <div className="card">5</div>
                    <div className="card">65</div>
                    <div className="card">4</div>
                    <div className="card">5</div>
                    <div className="card">65</div>
                    <div className="card">1</div>
                    <div className="card">2</div>
                    <div className="card">3</div>
                    <div className="card">4</div>
                    <div className="card">5</div>
                    <div className="card">65</div>
                    <div className="card">4</div>
                    <div className="card">5</div>
                </div>
                <div className="commit-div">
                    <Button
                        type="primary"
                        style={{width:'120px'}}
                    >
                        交卷
                    </Button>
                </div>
            </div>
        )
    }

}

export default ExamCountDown;